<template>
  <drawer-panel v-model="dialogVisible" title="编辑基本信息">
    <form-panel :ok-click="submitForm">
      <template v-if="monitorType == 'airtype'">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
          <el-form-item label="站点名称" prop="pointName">
            <el-input v-model="queryObj.pointName" placeholder="请输入站点名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="queryObj.address" placeholder="请输入地址" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="所属区域" prop="areaCode">
            <el-select v-model="queryObj.areaCode" placeholder="请选择所属区域" clearable :style="{ width: '100%' }">
              <el-option
                v-for="(item, index) in areaCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="中心经度" prop="longitude">
            <el-input v-model="queryObj.longitude" placeholder="请输入中心经度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心纬度" prop="latitude">
            <el-input v-model="queryObj.latitude" placeholder="请输入中心纬度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="标准级别" prop="standLevelCode">
            <el-select
              v-model="queryObj.standLevelCode"
              placeholder="请选择标准级别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in standLevelCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="覆盖面积" prop="coverage">
            <el-input v-model="queryObj.coverage" placeholder="请输入覆盖面积" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="功能区类型" prop="functionTypeCode">
            <el-select
              v-model="queryObj.functionTypeCode"
              placeholder="请选择功能区类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in functionTypeCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="建设日期" prop="buildDate">
            <el-date-picker
              v-model="queryObj.buildDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建设日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <!--        <el-form-item label="覆盖人口" prop="field113">
            <el-input v-model="queryObj.field113" placeholder="请输入覆盖人口" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>-->
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="queryObj.linkMan" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="queryObj.linkPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="注销状态" prop="logoutStatus">
            <el-radio-group v-model="queryObj.logoutStatus">
              <el-radio
                v-for="(item, index) in logoutStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template v-else-if="monitorType == 'noisetype'">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
          <el-form-item label="站点名称" prop="pointName">
            <el-input v-model="queryObj.pointName" placeholder="请输入站点名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心经度" prop="longitude">
            <el-input v-model="queryObj.longitude" placeholder="请输入中心经度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心纬度" prop="latitude">
            <el-input v-model="queryObj.latitude" placeholder="请输入中心纬度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="建设日期" prop="buildDate">
            <el-date-picker
              v-model="queryObj.buildDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建设日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="queryObj.linkMan" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="queryObj.linkPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="注销状态" prop="logoutStatus">
            <el-radio-group v-model="queryObj.logoutStatus">
              <el-radio
                v-for="(item, index) in logoutStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template v-else-if="monitorType == 'watertype'">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
          <el-form-item label="站点名称" prop="pointName">
            <el-input v-model="queryObj.pointName" placeholder="请输入站点名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="断面" prop="sectionCode">
            <el-select v-model="queryObj.sectionCode" placeholder="请选择断面" clearable :style="{ width: '100%' }">
              <el-option
                v-for="(item, index) in sectionCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="隶属区域" prop="areaCode">
            <el-select v-model="queryObj.areaCode" placeholder="请选择隶属区域" clearable :style="{ width: '100%' }">
              <el-option
                v-for="(item, index) in areaCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属流域" prop="basinCode">
            <el-select v-model="queryObj.basinCode" placeholder="请选择所属流域" clearable :style="{ width: '100%' }">
              <el-option
                v-for="(item, index) in basinCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水质级别" prop="waterLevelCode">
            <el-select
              v-model="queryObj.waterLevelCode"
              placeholder="请选择水质级别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in waterLevelCodeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="中心经度" prop="longitude">
            <el-input v-model="queryObj.longitude" placeholder="请输入中心经度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心纬度" prop="latitude">
            <el-input v-model="queryObj.latitude" placeholder="请输入中心纬度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="建设日期" prop="buildDate">
            <el-date-picker
              v-model="queryObj.buildDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建设日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="queryObj.linkMan" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="queryObj.linkPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="注销状态" prop="logoutStatus">
            <el-radio-group v-model="queryObj.logoutStatus">
              <el-radio
                v-for="(item, index) in logoutStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template v-else-if="monitorType == 'smoketype'">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
          <el-form-item label="站点名称" prop="pointName">
            <el-input v-model="queryObj.pointName" placeholder="请输入站点名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心经度" prop="longitude">
            <el-input v-model="queryObj.longitude" placeholder="请输入中心经度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心纬度" prop="latitude">
            <el-input v-model="queryObj.latitude" placeholder="请输入中心纬度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="建设日期" prop="buildDate">
            <el-date-picker
              v-model="queryObj.buildDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建设日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <!--        <el-form-item label="覆盖人口" prop="field113">
            <el-input v-model="queryObj.field113" placeholder="请输入覆盖人口" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>-->
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="queryObj.linkMan" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="queryObj.linkPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="注销状态" prop="logoutStatus">
            <el-radio-group v-model="queryObj.logoutStatus">
              <el-radio
                v-for="(item, index) in logoutStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template v-else-if="monitorType == 'dusttype'">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
          <el-form-item label="站点名称" prop="pointName">
            <el-input v-model="queryObj.pointName" placeholder="请输入站点名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心经度" prop="longitude">
            <el-input v-model="queryObj.longitude" placeholder="请输入中心经度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="中心纬度" prop="latitude">
            <el-input v-model="queryObj.latitude" placeholder="请输入中心纬度" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="建设日期" prop="buildDate">
            <el-date-picker
              v-model="queryObj.buildDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建设日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <!--        <el-form-item label="覆盖人口" prop="field113">
            <el-input v-model="queryObj.field113" placeholder="请输入覆盖人口" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>-->
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="queryObj.linkMan" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="queryObj.linkPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="注销状态" prop="logoutStatus">
            <el-radio-group v-model="queryObj.logoutStatus">
              <el-radio
                v-for="(item, index) in logoutStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
    </form-panel>
  </drawer-panel>
</template>

<script>
import {
  pollutantFunctionTypeList,
  pollutantRegionList,
  pollutantSectionTypeList,
  pollutantStandLevelList,
  pollutantValleyList
} from '@/api/commonApi'
import serviceMap from '@/views/theApp/common/serviceMap'

export default {
  name: 'EditInput',
  props: {
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    },
    success: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      elColSpan: 24,
      queryObj: {
        id: undefined,
        pointName: undefined,
        address: undefined,
        areaCode: undefined,
        longitude: undefined,
        latitude: undefined,
        standLevelCode: undefined,
        coverage: undefined,
        functionTypeCode: undefined,
        buildDate: undefined,
        field113: undefined,
        linkMan: undefined,
        linkPhone: undefined,
        logoutStatus: undefined,
        functionCode: undefined,
        sectionCode: undefined,
        basinCode: undefined,
        waterLevelCode: undefined
      },
      rules: {
        pointName: [
          {
            required: true,
            message: '请输入站点名称',
            trigger: 'blur'
          }
        ],
        address: [
          {
            // required: true,
            message: '请输入地址',
            trigger: 'blur'
          }
        ],
        areaCode: [
          {
            // required: true,
            message: '请选择所属区域',
            trigger: 'change'
          }
        ],
        longitude: [
          {
            // required: true,
            message: '请输入中心经度',
            trigger: 'blur'
          }
        ],
        latitude: [
          {
            // required: true,
            message: '请输入中心纬度',
            trigger: 'blur'
          }
        ],
        standLevelCode: [
          {
            // required: true,
            message: '请选择标准级别',
            trigger: 'change'
          }
        ],
        coverage: [
          {
            // required: true,
            message: '请输入覆盖面积',
            trigger: 'blur'
          }
        ],
        functionTypeCode: [
          {
            // required: true,
            message: '请选择功能区类型',
            trigger: 'change'
          }
        ],
        buildDate: [
          {
            // required: true,
            message: '请输入建设日期',
            trigger: 'change'
          }
        ],
        linkMan: [
          {
            // required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }
        ],
        linkPhone: [
          {
            // required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }
        ],
        logoutStatus: [
          {
            required: true,
            message: '注销状态不能为空',
            trigger: 'change'
          }
        ],
        sectionCode: [
          {
            // required: true,
            message: '请选择断面编码 ',
            trigger: 'change'
          }
        ],
        basinCode: [
          {
            // required: true,
            message: '请选择所属流域',
            trigger: 'change'
          }
        ],
        waterLevelCode: [
          {
            // required: true,
            message: '请选择水质级别',
            trigger: 'change'
          }
        ]
      },
      areaCodeOptions: [],
      standLevelCodeOptions: [],
      functionTypeCodeOptions: [],
      logoutStatusOptions: [
        {
          label: '否',
          value: '0'
        },
        {
          label: '是',
          value: '1'
        }
      ],
      functionCodeOptions: [],
      sectionCodeOptions: [],
      basinCodeOptions: [],
      waterLevelCodeOptions: []
    }
  },
  methods: {
    init() {
      // 行政区划下拉列表
      pollutantRegionList().then(res => {
        this.areaCodeOptions = res
      })
      // 标准级别下拉列表
      pollutantStandLevelList().then(res => {
        this.standLevelCodeOptions = res
      })
      // 功能区类型
      pollutantFunctionTypeList().then(res => {
        this.functionTypeCodeOptions = res
        this.functionCodeOptions = res
      })
      // 断面分类列表
      pollutantSectionTypeList().then(res => {
        this.sectionCodeOptions = res
      })
      // 流域下拉列表
      pollutantValleyList().then(res => {
        this.basinCodeOptions = res
      })
    },
    open(record) {
      this.dialogVisible = true
      if (record) {
        Object.assign(this.queryObj, record)
      } else {
        Object.assign(this.queryObj, {
          id: undefined,
          pointName: undefined,
          address: undefined,
          areaCode: undefined,
          longitude: undefined,
          latitude: undefined,
          standLevelCode: undefined,
          coverage: undefined,
          functionTypeCode: undefined,
          buildDate: undefined,
          field113: undefined,
          linkMan: undefined,
          linkPhone: undefined,
          logoutStatus: undefined
        })
      }
    },
    close() {
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const queryObj = this.queryObj
        serviceMap[this.monitorType].saveOrUpdate(queryObj).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.success()
          this.close()
        })
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped></style>
